<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【微信群】加入官方严选车友会 速戳 必入！ - 严选车友   严选社区-专业二手车论坛   </title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a{
            text-decoration: none;
        }
        .a1{
            display: inline;
            color: white;
            padding: 0 20px;
            text-align: center;

        }
        .el-header a:hover{
            padding: 10px 20px 10px 20px;
            color: #e14800;
            background-color: white;
        }
        #ft_bottom p {
            margin-bottom: 5px;

        }

        #ft_bottom a, #ft_bottom p {
            color: #FFFFFF;
            text-decoration: none;
        }





    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div id="d1" style="width: 1200px;height:30px;margin: 0 auto">
                <a style="padding: 0 20px;color: #333" href="">严选车官网</a>
            </div>
            <div id="d2" style="background-color: #e14800;margin: 0 auto;height: 40px">
                <div style="width: 1200px;margin: 0 auto;line-height: 40px">
                    <a class="a1" href="">首页</a>
                    <a class="a1" href="">社区</a>
                    <a class="a1" href="">积分商城</a>
                    <a class="a1" href="">车友会群</a>
                    <a class="a1" href="">问题反馈</a>
                    <span style="padding-left: 570px">
                        <a class="a1" href="">登录</a>
                        <a class="a1" href="">注册</a>
                    </span>
                </div>
            </div>
        </el-header>
        <el-main>
            <div style="width: 1200px;margin: 0 auto">
                <el-card class="box-card" v-for="o in 8">
                    <div slot="header" class="clearfix">
                        <span>车友讨论</span>
                        <el-button style="float: right; padding: 3px 0" type="text">评论</el-button>
                    </div>
                    <div v-for="o in arr" :key="o" class="text item">
                        <h3>
                            <h3>{{talk.nickname}}:{{talk.content}}</h3>
                            <p>发布于:{{talk.created}}</p>
                        </h3>
                        <div v-for="c in arr">
                            <h4>{{c.nickname}}评论道:{{c.content}}
                                <span style="float: right">发布于:{{c.created}}</span>
                            </h4>
                        </div>
                    </div>
                </el-card>
            </div>

        </el-main>


        <el-footer>

            <el-backtop :bottom="120">
                <div style="{
                height: 100%;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
                }">Top</div>
            </el-backtop>

                 <div style="height: 120px;padding: 28px 0;background-image: url('partner_img/wave.jpg')"></div>

                <div style="background-color: #282c30;color: #666;text-align: center;padding: 50px 0;">
                    <div id="ft_bottom">
                        <p>
                            <a href="">手机版</a>
                            <el-divider direction="vertical"></el-divider>
                            <a href="">个人收藏</a>
                            <el-divider direction="vertical"></el-divider>
                            <a href="">小黑屋</a>
                            <el-divider direction="vertical"></el-divider>
                            <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
                        </p>
                        <p>京ICP备 14030440号</p>
                        <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
                    </div>
                </div>

        </el-footer>
    </el-container>
</div>
</body>
<!--异步需要 引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:'#app',
        data:function(){
            return{
                talk: {urls: ""},
                comment:{content:""},
                arr:[]

            }
        },
        methods:{
            insert(){
                //发布评论时需要把当前浏览的微博id添加到评论对象里面
                v.comment.weiboId=v.weibo.id;
                //发请求 发布评论
                axios.post("/comment/insert",v.comment).then(function (response) {
                    if (response.data==1){
                        location.reload();//刷新页面
                    }else{
                        alert("请先登录!");
                        location.href="/login.html";
                    }

                })
            }
        },
        created: function () {
            //发请求获取详情
            axios.get("/talk/selectById" + location.search).then(function (response) {
                v.weibo = response.data;
            })
            //发请求获取所有当前相关的评论
            axios.get("/talk/selectByWeiboId"+location.search).then(function (response) {
                v.arr = response.data;
            })
        }
    })
</script>
</html>